<template>
  <div class="tasklist">
    <!-- 项目任务列表 -->
    <div class="title">
      <div class="des">
        <img :src="projectInfo.logo" alt="" />
        <div class="text">
          <p>{{ projectInfo.name }}</p>
          <span v-if="projectInfo.type === 1">瀑布式协作项目</span>
          <span v-else>软件敏捷开发项目</span>
        </div>
        <div class="level">
          <span
            :class="
              projectInfo.level <= 100
                ? 'LvOne'
                : projectInfo.level > 100 && projectInfo.level <= 200
                ? 'LvTwo'
                : 'LvThree'
            "
            >Lv{{ projectInfo.level }}</span
          >
        </div>
      </div>
      <div class="modify">
        <!-- <button class="cancel">编辑任务关系</button> -->
        <!-- <button class="edit" @click="assignTasks" v-if="projectLabel !== 2 || userType === 1">批量分配任务</button> -->
        <button
          class="edit"
          @click="newTask"
          v-if="editNum > 0 || userType === 1"
        >
          新建任务
        </button>
      </div>
    </div>
    <!-- <div class="checkAll">
      <input
        type="checkbox"
        name=""
        id=""
        :checked="allBtn"
        @click="selectAll($event)"
      />
    </div> -->
    <el-table
      height="620"
      :data="tableData"
      style="width: 98%"
      row-key="taskId"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      :tree-props="{ children: 'children' }"
      :cell-class-name="cellStyle"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="" width="50">
        <template slot-scope="scope">
          <div class="selectTd">
            <input
              type="checkbox"
              :checked="scope.row.isChecked"
              @click="checkedRow(scope.row, $event)"
            />
          </div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="序号" width="80" type="">
        <template slot-scope="scope">
          <span>{{ scope.row.orderNum + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="code"
        label="任务编号"
        width="150"
      ></el-table-column> -->
      <el-table-column label="任务名称" width="220">
        <template slot-scope="scope">
          <span
            v-if="
              scope.row.children &&
              scope.row.children.length === 0 &&
              (scope.row.level === 0 || scope.row.level === null)
            "
            class="taskLeftBox"
          ></span>
          <span
            class="taskName"
            :class="{
              nameConact1: scope.row.level === 0 || scope.row.level === null,
              nameConact2: scope.row.level === 1,
              nameConact3: scope.row.level === 2,
            }"
            @click="toDetail(scope.row)"
            >{{ scope.row.taskName }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="负责人">
        <template slot-scope="scope">
          <div
            v-if="
              scope.row.chargeList.length < 1 ||
              scope.row.chargeList[0] === null
            "
          >
            <span>暂无</span>
          </div>
          <div class="col2" v-else>
            <p
              v-if="scope.row.chargeList[0].roleName.length > 0"
              style="font-size: 14px"
            >
              {{
                scope.row.chargeList[0].roleName.length > 0
                  ? scope.row.chargeList[0].roleName[0].roleName
                  : ""
              }}
            </p>
            <img :src="scope.row.chargeList[0].userUrl" />
            <p style="font-size: 14px">
              {{ scope.row.chargeList[0].userName }}
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="执行角色" min-width="280">
        <template slot-scope="scope">
          <div class="col3" v-if="scope.row.performidList.length > 0">
            <div
              class="item"
              v-for="member in scope.row.performidList.slice(0, 6)"
              :key="member.userId"
            >
              <p v-if="member.roleName.length > 0">
                {{ member.roleName[0].roleName }}
              </p>
              <img :src="member.userUrl" />
              <p>{{ member.userName }}</p>
            </div>
            <div class="mpeople" v-if="scope.row.performidList.length > 6">
              等{{ scope.row.performidList.length }}人
            </div>
          </div>
          <div v-else>
            <span>暂无</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="审核人">
        <template slot-scope="scope">
          <div
            class="checkers"
            style="text-align: center"
            v-if="scope.row.checkedidList.length > 0"
          >
            <p v-for="checker in scope.row.checkedidList" :key="checker.i">
              <span>{{ checker.userName }}</span>
            </p>
          </div>
          <div v-else>
            <span>暂无</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="等级">
        <template slot-scope="scope">
          <div class="level level1">
            <!-- <span v-if="scope.row.taskProgress == 0" style="color:black; background-color:transparent">{{ scope.row.taskProgress }}%</span> -->
            <span
              :class="
                scope.row.priority <= 100
                  ? 'LvOne'
                  : scope.row.priority > 100 && scope.row.priority <= 200
                  ? 'LvTwo'
                  : 'LvThree'
              "
              >Lv {{ scope.row.priority }}</span
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间">
        <template slot-scope="scope">
          <div
            v-if="scope.row.startTime === null || scope.row.startTime === ''"
          >
            <span>未设置</span>
          </div>
          <div v-else>
            <span>{{ scope.row.startTime }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间">
        <template slot-scope="scope">
          <div v-if="scope.row.endTime === null || scope.row.endTime === ''">
            <span>未设置</span>
          </div>
          <div v-else>
            <span>{{ scope.row.endTime }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="进度" width="120">
        <template slot-scope="scope">
          <div style="margin: auto">
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="scope.row.taskProgress"
              status="exception"
            ></el-progress>
          </div>
          <!-- <div class="domany">
            <span
              class="many"
              :style="{ width: scope.row.taskProgress + '%' }"
              >{{ scope.row.taskProgress }}%</span
            >
          </div> -->
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="278" fixed="right">
        <template slot-scope="scope">
          <div class="btn" v-if="tableData">
          1.模板项目 2.自建项目 3.复制项目
          1.系统管理员 2.学校管理员
            <el-tooltip
              class="item"
              effect="dark"
              content="开始"
              placement="top"
            >
            判断是否为当前项目的创建人或者负责人,并且当前任务未开始，当前项目已经开始
              <img
                v-if="editNum > 0 && scope.row.status === 1 && projectStatus !== 1"
                src="@/assets/taskkaishi1.png"
                alt=""
                @click="startTask(scope.row)"
              />
              判断是否为当前任务的创建人
              <img
                v-else-if="scope.row.userId === userId && scope.row.status === 1 && projectStatus !== 1"
                src="@/assets/taskkaishi1.png"
                alt=""
                @click="startTask(scope.row)"
              />
              判断是否为当前任务的负责人
              <img
                v-else-if="scope.row.chargeList.length > 0 && scope.row.status === 1 && scope.row.chargeList[0].userId === userId && projectStatus !== 1"
                src="@/assets/taskkaishi1.png"
                alt=""
                @click="startTask(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="下移"
              placement="top"
            >
              <img
                src="@/assets/down.png"
                alt=""
                @click="downItem(scope.row, 2)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="上移"
              placement="top"
            >
              <img
                src="@/assets/up.png"
                alt=""
                @click="downItem(scope.row, 1)"
              />
            </el-tooltip>
          </div>
        </template>
      </el-table-column> -->
    </el-table>
    <CreateTask ref="child" @getTaskList="getTaskList"></CreateTask>
  </div>
</template>

<script>
import { getProTask, batchTask, modifyTaskRelationship, StartTask } from '@/api/project/projectTask';
import { getprodetail } from '@/api/project/prodetail';
import { getcalendar } from '@/api/project/calendar';
import CreateTask from './CreateTask.vue';
export default {
  name: 'tasklist',
  data() {
    return {
      name: '',
      type: 0,
      level: 1,
      logo: '',
      tableData: [],
      projectInfo: {},
      projectId: '',
      editList: [],
      allBtn: false,
      taskAllIdList: [], // 存放列表的所有id
      checkedIdList: [], // 存放用户选择的id
      allIdListNum: 0,
      projectLabel: 0, // 项目类型 1.模板项目 2.自建项目 3.复制项目
      userType: 0, // 用户身份类型
      projectCreate: [], // 项目创建人
      projectManage: [], // 项目负责人
      userId: 0, // 用户id
      // projectId: 0,
      projectStatus: null, // 项目状态 1-待开始  2-进行中 3-已完成
      editNum: 0 // 用于计算是否为项目创建人或项目负责人

    };
  },
  created() {
    this.getTaskList();
    this.getTaskInfo();
    this.projectId = Number(localStorage.getItem('projectId'));
    this.userType = Number(sessionStorage.getItem('usertype'));
    this.userId = Number(sessionStorage.getItem('userid'));
    this.getProjectLabel();
  },
  methods: {
    // 获取当前任务信息
    async getTaskInfo() {
      // 获取当前年月日
      let year = Number(new Date().getFullYear());// 当前年份
      let month = Number(new Date().getMonth() + 1);// 当前月份
      const res = await getcalendar(Number(localStorage.getItem('projectId')), month, year);
      // console.log('当前任务信息', res);
      this.projectInfo = res.data;
    },
    // 获取项目类型
    async getProjectLabel() {
      const res = await getprodetail(this.projectId, this.userType);
      console.log(res);
      this.projectLabel = res.data.label;
      this.projectCreate = res.data.createList;
      this.projectManage = res.data.managerList;
      this.projectStatus = res.data.status;
      // console.log(this.projectStatus);
      // 判断当前登录的用户的身份类型
      // if (this.userType === 1) {
      //   console.log('系统管理员');
      // }
      // 判断当前用户是否为项目创建人或项目负责
      this.projectCreate.forEach(item => {
        if (item.id === this.userId) {
          // console.log('当前用户为项目负责人');
          this.editNum = 1;
        }
      });
      this.projectManage.forEach(item => {
        if (item.id === this.userId) {
          // console.log('当前用户为项目创建人');
          this.editNum = 1;
        }
      });
    },
    // 获取任务列表
    async getTaskList() {
      // console.log('id', localStorage.getItem('projectId'));
      const res = await getProTask(Number(localStorage.getItem('projectId')));
      console.log('获取任务列表', res);
      this.tableData = res.data;
      this.addCheckStatus(this.tableData);
      this.allIdListNum = this.taskAllIdList.length;
      // this.addCheckStatus(this.tableData);
      // console.log(this.tableData);
    },
    // 下移 上移
    async downItem(val, val2) {
      // console.log(val);
      // console.log('项目类型' + this.projectLabel);
      // console.log('用户身份', this.userType);
      // 1.模板项目 2.自建项目 3.复制项目
      if (this.userType === 1 && this.projectLabel === 1) {
        console.log('可以修改顺序', Number(val.orderNum));
        const res = await modifyTaskRelationship(Number(val.orderNum), val.parentId, this.projectId, val.taskId, val2);
        console.log(res);
        if (res.code === 200) {
          this.$message({
            showClose: true,
            message: '移动成功',
            type: 'success'
          });
          this.getTaskList();
        } else {
          this.$message({
            showClose: true,
            message: `移动失败 ${res.msg}`,
            type: 'error'
          });
          // this.$message.error(`移动失败 ${res.msg}`);
        }
      } else if (this.userType === 1 && this.projectLabel === 3) {
        console.log('可以修改顺序');
        const res = await modifyTaskRelationship(val.orderNum, val.parentId, this.projectId, val.taskId, val2);
        console.log(res);
        if (res.code === 200) {
          this.$message({
            showClose: true,
            message: '移动成功',
            type: 'success'
          });
          this.getTaskList();
        } else {
          this.$message({
            showClose: true,
            message: `移动失败 ${res.msg}`,
            type: 'error'
          });
        }
      } else if (this.projectLabel === 2 && this.editNum > 0) {
        console.log('自建项目 项目负责人/项目创建人');
        // 判断是否为项目负责人或项目创建人
        // console.log('项目创建人', this.projectCreate);
        // console.log('项目负责人', this.projectManage);
        const res = await modifyTaskRelationship(val.orderNum, val.parentId, this.projectId, val.taskId, val2);
        console.log(res);
        if (res.code === 200) {
          this.$message({
            showClose: true,
            message: '移动成功',
            type: 'success'
          });
          this.getTaskList();
        } else {
          this.$message({
            showClose: true,
            message: `移动失败 ${res.msg}`,
            type: 'error'
          });
        }
      } else {
        console.log('无权修改');
        this.$message({
          showClose: true,
          message: '无操作权限'
        });
      };
    },
    // 开始任务
    async startTask(val) {
      console.log(val);
      // 判断当前任务是否有创建人、负责人以及审核人
      if (val.chargeList.length < 1) {
        // console.log('请添加项目负责人');
        this.$message({
          showClose: true,
          message: '请添加任务负责人!',
          type: 'info'
        });
      } else if (val.checkedidList.length < 1) {
        this.$message({
          showClose: true,
          message: '请添加任务审核人!',
          type: 'info'
        });
      } else if (val.performidList.length < 1) {
        this.$message({
          showClose: true,
          message: '请添加任务执行人!',
          type: 'info'
        });
      } else {
        if (val.status === 1) {
          const res = await StartTask({ taskId: val.taskId });
          console.log(res);
          if (res.code) {
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            });
            this.getTaskList();
          }
        } else {
          this.$message({
            showClose: true,
            message: '修改失败，任务已开始',
            type: 'error'
          });
        // this.$message.error('修改失败，任务已开始');
        };
      }
    },
    // 选择发生改变时触发
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      // console.log(val);
      this.editList = val;
    },
    // 批量分配任务
    async assignTasks() {
      console.log(this.checkedIdList);
      // 判断当前登录的用户是否为项目创建人或执行人
      // console.log('项目创建人', this.projectCreate);
      // console.log('项目负责人', this.projectManage);
      // console.log(this.userId);
      if (this.editNum > 0) {
        // console.log('当前用户可操作编辑按钮');
        if (this.checkedIdList.length > 0) {
          this.dto = { taskIdList: [...this.checkedIdList] };
          // const info = JSON.stringify(this.dto);
          const res = await batchTask(JSON.stringify(this.dto));
          console.log(res);
          if (res.code === 200) {
            this.$message({
              showClose: true,
              message: '批量分配成功',
              type: 'success'
            });
          } else {
            this.$message({
              showClose: true,
              message: `批量分配失败,${res.msg}`,
              type: 'error'
            });
            // this.$message.error(`批量分配失败,${res.msg}`);
          }
          this.allBtn = false;
          this.checkedIdList = [];
          this.taskAllIdList = [];
          this.getTaskList();
          this.$forceUpdate();
        } else {
          this.$message({
            showClose: true,
            message: '请先选择需要分配的任务'
          });
          // this.$message('请先选择需要分配的任务');
        }
      } else {
        this.$message({
          showClose: true,
          message: '无操作权限'
        });
        // console.log('无操作权限');
      }
    },
    // 循环递归添加选择状态
    addCheckStatus(list) {
      list.map(item => {
        this.taskAllIdList.push(item.taskId);
        item.isChecked = this.allBtn;
        this.addCheckStatus(item.children);
      });
      // console.log(this.tableData);
    },
    // 全选/取消选操作
    selectAll(e) {
      // 用户选择全选
      if (e.target.checked === true) {
        this.allBtn = true;
        this.taskAllIdList = [];
        this.addCheckStatus(this.tableData);
        // console.log(this.taskAllIdList);
        // 将用户选择的数组赋值为全部id的数组
        this.checkedIdList = this.taskAllIdList;
      } else { // 取消全选
        this.allBtn = false;
        this.addCheckStatus(this.tableData);
        // 用户取消全选，将数据重新赋值为空数组
        this.checkedIdList = [];
        // console.log(this.taskAllIdList);
      }
      // console.log(this.tableData);
    },
    // 用户选择一个
    checkedRow(val, e) {
      if (e.target.checked === true) {
        val.isChecked = true;
        // this.checkedIdList = [];
        this.checkedIdList.push(val.taskId);
        // 如果用户全部选择上了，那么顶部的全选按钮应该勾上
        // console.log(this.allIdListNum);
        // console.log(this.checkedIdList);
        if (this.checkedIdList.length === this.allIdListNum) {
          // console.log(this.allIdListNum);
          this.allBtn = true;
        }
      } else {
        // 用户一旦取消一个那么顶部的全选按钮应该取消选择
        this.allBtn = false;
        val.isChecked = false;
        const newArr = this.checkedIdList.filter(item => {
          return item !== val.taskId;
        });
        this.checkedIdList = newArr;
      }
    },
    // 设置表格第三列文字为左对齐
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // 第n(3)列的时候，才改变
      if (columnIndex === 0) {
        return `colStyle`;
      } else {
        return `notcolStyle`;
      }
    },
    // 跳转到任务详情
    toDetail(val) {
      console.log(val);
      this.$router.push({
        name: 'Misinfo&intro',
        params: {
          taskId: val.taskId,
          index: 0,
          currentView: 'info'
        }
      });
      localStorage.setItem('taskId', val.taskId);
    },
    newTask() {
      console.log('新建任务');
      this.$refs.child.openNewTask(this.projectId);
    }
  },
  components: {
    CreateTask
  }
};
</script>
<style lang="less" scoped>
// 第一列样式
.col1 {
  width: 237px;
  height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .dec1 {
    margin-right: 10px;
  }
  p {
    width: 167px;
    margin: 0;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    line-height: 14px;
    text-align: left;
  }
  span {
    display: block;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #555555;
    line-height: 17px;
    margin-top: 4px;
    text-align: left;
  }
}
.col2 {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
p {
  margin: 0;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 14px;
  text-align: center;
  img {
    width: 45px;
    height: 45px;
  }
}
img {
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 1px 1px 3px #d7d7d7;
}
// 第三列样式
.col3 {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  .item {
    width: 85px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      box-shadow: 1px 1px 3px #d7d7d7;
    }
  }
  p {
    width: 85px;
    margin: 0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    line-height: 14px;
    text-align: center;
  }
  .mpeople {
    width: 56px;
    height: 56px;
    background: #e8f8fb;
    box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
    border: 3px solid #ffffff;
    border-radius: 50%;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2fc0e0;
    line-height: 50px;
    align-self: center;
    margin-left: 2px;
  }
}
</style>

<style lang="less" scoped>
/deep/.el-progress.is-exception .el-progress-bar__inner {
  background-color: #409eff;
}
button {
  cursor: pointer;
}
.tasklist {
  width: 100%;
  // padding:;
  // min-height: 836px;
  // min-height: 836px;
  background-color: #ffffff;
  box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5),
    1px 2px 3px 0px rgba(153, 153, 153, 0.5);
  border-radius: 0 5px 5px 5px;
  margin-top: -4px;
  padding-bottom: 10px;

  p {
    margin: 0;
  }
  .title {
    width: 98%;
    height: 45px;
    margin: 0 auto;
    padding-top: 36px;
    margin-bottom: 38px;
    position: relative;
    .des {
      width: 440px;
      height: 45px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      img {
        width: 45px;
        height: 45px;
        border-radius: 10px;
        // box-shadow: none;
      }
      .text {
        margin-left: 20px;
        p {
          margin: 0;
          font-size: 16px;
          font-weight: 400;
          color: #222222;
          line-height: 28px;
        }
        span {
          font-size: 12px;
          font-weight: 400;
          color: #555555;
          line-height: 20px;
        }
      }
      .level {
        align-self: flex-start;
        text-align: center;
        font-size: 12px;
        font-family: SukhumvitSet-Bold, SukhumvitSet;
        font-weight: bold;
        color: #ffffff;
        line-height: 21px;
        font-weight: bold;
        width: 60px;
        height: 21px;
        border-radius: 10px;
        margin-top: 5px;
        margin-left: 20px;
      }
      .LvOne {
        background: #c5f5d1;
      }
      .LvTwo {
        background: #f7cbd2;
      }
      .LvThree {
        background: #cbd5f5;
      }
    }
  }
  .modify {
    width: auto;
    height: 40px;
    position: absolute;
    top: 36px;
    right: 0px;
    button {
      width: 162px;
      height: 40px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 40px;
      text-align: center;
      border-radius: 4px;
      margin-left: 18px;
    }
    .cancel {
      background: #e8f8fb;
      color: #2fc0e0;
    }
    .edit {
      background: #2fc0e0;
      color: #ffffff;
      box-shadow: 0 0 5px #2fc0e0;
    }
    .finish {
      background: #2fc0e0;
      color: #ffffff;
      box-shadow: 0 0 5px #2fc0e0;
    }
  }
  .search {
    width: 937px;
    height: 40px;
    margin-bottom: 20px;
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
    .box1 {
      width: 177px;
      height: 32px;
      background: #ffffff;
      border-radius: 3px;
      border: 1px solid #f1f4ff;
      display: flex;
      .lf {
        flex: 1;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #555555;
        line-height: 32px;
        text-align: center;
      }
      .rh {
        width: 39px;
        height: 32px;
        border-left: 1px solid #f1f4ff;
        background: url("~@/assets/triangle.png") no-repeat center center;
        background-size: 12px 21px;
      }
    }
    button {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      width: 85px;
      height: 34px;
      background: #2fc0e0;
      border-radius: 4px;
      box-shadow: 0 0 5px #2fc0e0;
    }
  }
  .el-table {
    margin: 0 auto;
  }
  /deep/.cell {
    position: relative;
    .taskLeftBox {
      display: inline-block;
      width: 23px;
      height: 2px;
    }
    .taskName {
      display: inline-block;
      color: #2fc0e0;
      cursor: pointer;
      vertical-align: top;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
    }
    .taskName:hover {
      text-decoration: underline;
    }
  }
  .nameConact1 {
    width: calc(100% - 33px);
  }
  .nameConact1:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 16px;
    background: #1160cf;
    border-radius: 3px;
    margin-right: 5px;
  }
  .nameConact2 {
    width: calc(100% - 74px);
  }
  .nameConact2:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 16px;
    background: #b9110b;
    border-radius: 3px;
    margin-right: 5px;
  }
  .nameConact3 {
    width: calc(100% - 104px);
  }
  .nameConact3:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 16px;
    background: #29a709;
    border-radius: 3px;
    margin-right: 5px;
  }
  /deep/ .el-table th {
    height: 62px;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: normal;
    color: #222222;
    line-height: 14px;
  }
  .el-table {
    margin: 0 auto;
    padding: 0;
  }
  /deep/ .el-table th {
    height: 62px !important;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: normal;
    color: #222222;
    line-height: 14px;
  }
  /deep/ .el-table td {
    height: 112px !important;
    padding: 0;
  }
  /deep/.el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #f1f4ff;
  }
  .mpeople {
    width: 56px;
    height: 56px;
    background: #e8f8fb;
    box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
    border: 3px solid #ffffff;
    border-radius: 50%;
    line-height: 56px;
  }
  .btn {
    img {
      width: 41px;
      height: 41px;
      margin-left: 24px;
      display: inline-block;
      cursor: pointer;
    }
  }
  .domany {
    border: 1px solid #6c59cc;
    width: 150px;
    height: 30px;
    border-radius: 16px;
    margin: 0 auto;
    padding: 4px;
    text-align: left;
    .many {
      display: inline-block;
      height: 100%;
      background-image: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
      border-radius: 12px;
      text-align: center;
      color: white;
      line-height: 24px;
      font-size: 12px;
      color: #ffffff;
    }
  }
  .checkers {
    width: 100%;
    height: 100%;
    p {
      line-height: 20px;
    }
  }
  .level {
    width: 100%;
    height: 21px;
    // background: #C5F5D1;
    border-radius: 11px;
    text-align: center;
    span {
      width: 59px;
      height: 100%;
      border-radius: 11px;
      font-size: 12px;
      font-weight: bold;
      // color: #ffffff;
      display: inline-block;
    }
  }
  .level1 {
    .LvOne {
      // background: #c5f5d1;
      color: blue;
    }
    .LvTwo {
      // background: #f7cbd2;
      color: red;
    }
    .LvThree {
      // background: #cbd5f5;
      color: green;
    }
  }
}
.checkAll {
  position: absolute;
  z-index: 3;
  left: 30px;
  top: 190px;
}
.selectTd {
  display: inline-block;
}
// 修改展开图标大小
/deep/.el-icon-arrow-right {
  font-size: 18px;
  font-weight: 600;
}

// /* // 修改滚动条样式 */
// /deep/::-webkit-scrollbar {
//   width: 10px; /*高宽分别对应横竖滚动条的尺寸 */
//   max-height: 10px;
// }
// /* 滚动槽的轨道 */
// ::-webkit-scrollbar-track {
//   border-radius: 30px;
// }

/* 滚动条的小滑块 */
/deep/::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #2fc0e0;
}
/deep/.colStyle .cell {
  text-align: left;
}
</style>
